<template>
  <div>
    <div class="middle">
      <span class="font">  数据列表 </span>
      <el-select
        v-model="limit"
        placeholder="显示条数"
        class="select"
        @change="limitChange"
      >
        <el-option
          v-for="(item,index) in options"
          :key="index"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select>
      <!-- <el-select
        v-model="value2"
        multiple
        collapse-tags
        style="margin-left: 20px"
        placeholder="排序方式"
        class="select"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select> -->
      <el-button @click="dialogFormVisible = true" class="button button-1"
        >添加</el-button
      >
      <el-dialog
        title="添加客户类型"
        @close="closeDialog"
        :visible.sync="dialogFormVisible"
      >
        <el-form :model="form" ref="form">
          <el-form-item label="父类型" :label-width="formLabelWidth">
            <el-input
              v-model="form.ctm_father_type"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="客户类型" :label-width="formLabelWidth">
            <el-input
              v-model="form.ctm_customer_type"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addCustType">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div>
      <el-table :data="tableData" border style="width: 100%" v-loading="loading">
        <el-table-column prop="ctm_father_type" label="父类型">
        </el-table-column>
        <el-table-column prop="ctm_customer_type" label="客户类型名称">
        </el-table-column>
        <el-table-column prop="Operate" label="操作">
          <template scope="scope">
            <el-button type="text" @click="edit(scope.row)"> 编辑 </el-button>
            <el-button type="text" @click="del(scope.row.ctm_id)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="bottom clear">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="total"
          @current-change="currPage"
          :current-page="page"
          :page-size="limit"
          style="float: right"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getCustType,
  delCustType,
  AddCustType,
  EditCustTypeApi,
} from "@/http/merchant/custType";
export default {
  data() {
    return {
      loading:true,
      dialogFormVisible: false,
      form: {
        ctm_father_type: "",
        ctm_customer_type: "",
        ctm_id: "",
      },
      options:[5,10,15],
      tableData: [],
      page: 1,
      limit: 10,
      total: 0,
      formLabelWidth: "120px",
    };
  },
  created() {
    this.init(this.limit, this.page);
  },
  methods: {
    async init(limit, page) {
      let data = await getCustType({ limit, page });
      console.log(data);
      if (data.data.code != 200) throw new Error();
      this.tableData = data.data.data;
      this.total = data.data.totalCount;
      this.loading=false
    },
    async del(id) {
      this.$confirm("确定删除？", "提示", {
        type: "error",
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(async () => {
        let data = await delCustType({ id });
        if (data.data.code != 200) throw new Error();
        this.$message.success("删除成功");
        this.init(this.limit, this.page);
      });
    },
    async addCustType() {
      if (this.form.ctm_id) {
        let data = await EditCustTypeApi(this.form);
        console.log(data);
        this.$message.success("编辑成功");
        this.init(this.limit, this.page);
      } else {
        let data = await AddCustType(this.form);
        this.dialogFormVisible = false;
        if (data.data.code != 200) throw new Error("获取错误");
        this.$message.success("添加成功");
        this.init(this.limit, this.page);
      }
      this.dialogFormVisible = false;
    },
    async edit(row) {
      this.dialogFormVisible = true;
      this.form.ctm_father_type = row.ctm_father_type;
      this.form.ctm_customer_type = row.ctm_customer_type;
      this.form.ctm_id = row.ctm_id;
    },
    currPage(page) {
      this.init(this.limit, page);
      this.page = page;
    },
    closeDialog() {
      (this.form = {
        ctm_father_type: "",
        ctm_customer_type: "",
        ctm_id: "",
      })

    },
    limitChange(limit){
      this.init(limit,this.page)
    }
  },
};
</script>

<style lang="scss" scoped>
.middle {
  margin-top: 10px;
  padding: 0 20px 0;
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  background-color: #eee;
  border: 1px solid #ddd;
  line-height: 50px;

  & .button {
    margin-right: 20px;
    float: right;
    margin-top: 4px;
  }

  & .select {
    float: right;
    margin-right: 20px;
  }
}

.bottom {
  padding: 4px 20px 0;
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  background-color: #eee;
  border: 1px solid #ddd;
}
</style>